<template>
  <div class="box">
    <van-swipe :show-indicators="false" vertical>
      <van-swipe-item v-for="(item, index) in videoResult" :key="index">
        <div class="video" @click="videoplay(index)">
          <video autoplay ref="videoElement" :src="item.shearUrl"></video>
        </div>

        <div class="img-right">
          <p>
            <img
              @click="shop(index)"
              class="img-money"
              src="../../image//my_img//购买.png"
              alt=""
            />
          </p>

          <p>
            <img
              @click="scllect(item.id)"
              v-if="sc"
              class="img-sc"
              src="../../image//my_img//收藏.png"
              alt=""
            />
            <img
              v-else
              class="img-shouc1"
              @click="cancelvideo(index)"
              src="../../image//my_img/收藏1.png"
              alt=""
            />

            <!-- <img src="isAction===true? require('@/image//my_img/收藏.png):require('@/image//my_img/收藏1.png')" alt="">@click="gostore" alt=""> -->
          </p>

          <p>
            <img
              @click="showPopup"
              class="img-userinfo"
              src="../../image//my_img//聊天.png"
              alt=""
            />
          </p>

          <p>
            <img
              @click="add(item)"
              type="primary"
              size="small"
              class="img-danmu"
              src="../../image//my_img/弹幕.png"
              alt=""
            />
          </p>

          <!-- <p class="shonum">{{ shopnumber.buyNum }}万人</p>
          <p class="shonumm">已购买</p> -->
        </div>

        <div class="title">
          <p class="title-head">{{ item.title }}</p>
          <p class="title-p1">{{ item.abstracts }}</p>
        </div>

        <div class="headr" v-if="item.isShowTanmu" @click="tanchuang">
          <van-barrage v-model="list" autoplay="true" class="videodm">
            <div style="width: 100%; height: 150px"></div>
          </van-barrage>
        </div>
      </van-swipe-item>
    </van-swipe>

    <van-popup position="bottom" v-model:show="show" :style="{ padding: '64px' }">
      <input class="comment" type="text" v-model="dmvalue" placeholder="请输入弹幕内容" />
      <button class="fsbutton" @click="fsbutton">发送</button>
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

import { userSearchStore } from '../../stores/video'

const vediolist = ref([])
const router = useRouter()
const zf = ref(true)
const sc = ref()
const shopnumber = ref()

const userId = ref(JSON.parse(localStorage.getItem('userId') || ''))
const sessionId = ref(JSON.parse(localStorage.getItem('sessionId') || ''))

const searchStore = userSearchStore() //获取仓库数据拿到页面
const videoResult: any = ref([]) //接收数据

onMounted(async () => {
  await searchStore.handleSearch('1', 1, 5)
  videoResult.value = searchStore.videoResult
  console.log(videoResult.value, '视频11')
  shopnumber.value = videoResult.value
  console.log(shopnumber, '1212')
})

//购买
const shop = async (index: number) => {
  zf.value = false
  const video = videoResult.value[index]
  if (video && video.id && video.price) {
    try {
      await searchStore.shopdata(video.id, video.price)
      // videoResult.value[index].zf=false
    } catch (error) {
      console.log('购买失败')
    }
  }
}

//收藏视频

const scllect = async (index: number) => {
  sc.value = false
  const video = videoResult.value[index]
  console.log(video, '收藏')
  if (video && video.id) {
    await searchStore.handshouData(video.id)
  }
}

//取消收藏

const cancelvideo = async (index: number) => {
  sc.value = true
  const video = videoResult.value[index]
  console.log(video, '取消收藏')
  if (video && video.id) {
    await searchStore.deleteScllect(video.id)
  }
}

// const scllectlist = ref([])
const videoplay = (index: number) => {
  const videoElement = document.querySelectorAll('video')[index] as HTMLVideoElement
  if (videoElement.paused) {
    videoElement.play()
  } else {
    videoElement.pause()
  }
}

// 弹幕列表
const list = ref([])
// 评论列表
const dmvalue = ref('')

const fsbutton = () => {
  if (dmvalue.value.trim()) {
    list.value.push({ id: Math.random(), text: dmvalue.value })
    dmvalue.value = ''
    show.value = false
  }
}

const show = ref(false)
//评论显示
const showPopup = () => {
  show.value = true
}

//弹窗显示
const add = (item: any) => {
  item.isShowTanmu = !item.isShowTanmu
  item.isLiked3 = !item.isLiked3
}

const tanchuang = (item: any) => {
  item.isShowTanmu = !item.isShowTanmu
}

// // //收藏
// const scllect = (id:number) => {
//   sc.value=false
//     const videodata=shopnumber.value[id]

// const scllectvideo = async () => {
//   await axios.post("/health/user/video/verify/v1/addUserVideoCollection",
//     {
//       videoId:id
//     },
//     {
//       headers: {
//       userId:userId.value as number,
//         sessionId: sessionId.value as string,
//         'Content-Type': 'application/x-www-form-urlencoded'
//       }
//     }
//   ).then(res => {
//     console.log(res.data, '收藏');
//   })
// }
// scllectvideo()
// }

// // //取消视频收藏

// const cancelvideo=()=>{
//     sc.value=true
//   const cancelvideo=async()=>{
//      await axios.delete('/health/user/verify/v1/cancelVideoCollection',
//       {
//         headers:{
//           userId:userId.value as number,
//           sessionId:sessionId.value as string
//         },
//         params:{
//           videoId:1
//         }
//       }

//      ).then(res=>{
//       console.log(res,'取消收藏')
//      })
// }
// cancelvideo()

// const cancelvideo=()=>{
//     sc.value=true
//   const cancelvideo=async()=>{
//      await axios.delete('/health/user/verify/v1/cancelVideoCollection',
//       {
//         headers:{
//           userId:userId.value as number,
//           sessionId:sessionId.value as string
//         },
//         params:{
//           videoId:1
//         }
//       }

//      ).then(res=>{
//       console.log(res,'取消收藏')
//      })
// }
// cancelvideo()
// }

//弹幕接口
const dmjk = async () => {
  await axios
    .post(
      '/health/user/video/verify/v1/addVideoComment',
      {
        videoId: 1,
        content: '哦我的天',
      },
      {
        headers: {
          userId: userId.value as number,
          sessionId: sessionId.value as string,
          'Content-Type': 'application/x-www-form-urlencoded',
        },
      },
    )
    .then((res) => {
      console.log(res, '弹幕接口')
    })
}
dmjk()

//弹幕列表

// const dmlist=async()=>{
//   await axios.get('/health/user/video/v1/findVideoCommentList',{
//     params:{
//       videoId:1
//     }
//   }).then(res=>{
//     console.log(res,'弹幕列表')
//     list.value=res.data.result
//   })
// }
// dmlist()

// // //视频购买
// const shop = (index:number) => {

//   // scllectlist.value.push(item)
//   // console.log(scllectlist.value, "存入视频")

// const buyvideo = async () => {
//   await axios.post("/health/user/video/verify/v1/videoBuy",
//     {
//       videoId:6,
//       price:100

//     },
//     {
//       headers: {
//         userId: userId.value as number,
//         sessionId: sessionId.value as string,
//         'Content-Type': 'application/x-www-form-urlencoded'
//             },
//     }
//   ).then(res => {
//     console.log(res.data, '666666');
//   })
// }
// buyvideo()
// }

// //视频购买
// const shop = (index:number) => {

//   // scllectlist.value.push(item)
//   // console.log(scllectlist.value, "存入视频")

// const buyvideo = async () => {
//   await axios.post("/health/user/video/verify/v1/videoBuy",
//     {
//       videoId:6,
//       price:100

//     },
//     {
//       headers: {
//         userId: userId.value as number,
//         sessionId: sessionId.value as string,
//         'Content-Type': 'application/x-www-form-urlencoded'
//             },
//     }
//   ).then(res => {
//     console.log(res.data, '666666');
//   })
// }
// buyvideo()
// }

// //视频列表
// const getvedio = () => {
//   axios.get('/health/user/video/v1/findVideoVoList',
//     {
//       params: {
//         userId:userId.value as number,
//         sessionId: sessionId.value as string,
//         categoryId: 1,
//         page:1,
//         count:10
//       }
//     }
//   ).then(res => {
//     console.log(res.data.result, 33)
//     vediolist.value = res.data.result
//     shopnumber.value=res.data.result[1].buyNum
//   })
// }
// getvedio()
</script>

<style scoped lang="scss">
.box {
  display: flex;
  height: 650px; // 1300px * 0.5
  /* background-color: pink; */
  position: relative;
  left: 0;
  top: 0;
}

.video {
  display: flex;
  width: 374.5px; // 749px * 0.5
  height: 666px; // 1332px * 0.5
}

.title {
  position: absolute;
  display: flex;
  display: inline-block;
  width: 325px; // 650px * 0.5
  height: 100px; // 200px * 0.5
  left: 25px; // 50px * 0.5
  top: 525px; // 1050px * 0.5
}

.title-head {
  font-size: 15px; // 30px * 0.5
  margin-top: -2.5px; // -5px * 0.5
  color: #fff;
}

.title-p1 {
  font-size: 13px; // 26px * 0.5
  color: #f2f2f2;
}

.title-p2 {
  font-size: 11.5px; // 23px * 0.5
  color: #fff;
}

.img-right {
  position: absolute;

  width: 100px;
  height: 450px;
  left: 630px;
  line-height: 50px;
  top: 650px;
  z-index: 999;
  text-align: center;

  // background-color: red;

  width: 50px; // 100px * 0.5
  height: 225px; // 450px * 0.5
  left: 315px; // 630px * 0.5
  line-height: 25px; // 50px * 0.5
  top: 300px; // 600px * 0.5
  z-index: 999;
  text-align: center;
}

.video video {
  width: 100%;
  height: 100%;
}

.img-money {
  width: 30px; // 60px * 0.5
  height: 30px; // 60px * 0.5
}

.img-userinfo {
  width: 30px; // 60px * 0.5
  height: 30px; // 60px * 0.5
}

.img-sc {
  width: 30px; // 60px * 0.5
  height: 30px; // 60px * 0.5
}

.img-shouc1 {
  width: 30px; // 60px * 0.5
  height: 30px; // 60px * 0.5
}

.img-danmu {
  width: 32.5px; // 65px * 0.5
  height: 21px; // 42px * 0.5
  margin-left: 7.5px; // 15px * 0.5
}

.img-p {
  width: 100%;
  height: 12.5px; // 25px * 0.5
  font-size: 10px; // 20px * 0.5
  color: #fff;
}

.img-m {
  width: 100%;
  height: 12.5px; // 25px * 0.5
  font-size: 10px; // 20px * 0.5
  color: #fff;
  margin-top: -10px; // -20px * 0.5
}

.video-head {
  position: absolute;
  display: block;

  height: 70px;
  width: 600px;

  left: 50px;
  top: 70px;
  margin-top: -70px;

  height: 35px; // 70px * 0.5
  width: 300px; // 600px * 0.5
  background-color: red;
  left: 25px; // 50px * 0.5
  top: 35px; // 70px * 0.5
  margin-top: -35px; // -70px * 0.5
}

.headr {
  position: absolute;
  width: 700px;
  height: 150px;
  left: 25px;
  line-height: 50px;
  top: 30px;
  z-index: 999;
  text-align: center;
}
:root {
  --van-barrage-font-size: 26px;
}

.videodm {
  font-size: 40px;
}

.comment {
  width: 200px;
  height: 35px;

  border: none;
  margin-left: 7px;
  padding-left: 15px;
  border-radius: 3px;
  font-size: 15px;
  border: 1px solid #ccc;
}
.fsbutton {
  width: 60px;
  border-radius: 5px;
  height: 39px;
  border: none;
  font-size: 15px;
}

.shonum {
  display: flex;
  color: #fff;
  font-size: 11px;
  margin-top: -10px;
  margin-left: 14px;
}

.shonumm {
  display: flex;
  color: #fff;
  font-size: 11px;
  margin-top: -15px;
  margin-left: 16px;
}
</style>
